<template>
  <div class="pay">
    <top-header title="支付"></top-header>
    <card-deta :card_info="sku"></card-deta>
    <van-cell-group class="pay-cell-group">
      <van-cell class="pay-cell-group__cell"
                title="数量">
        <template #default>
          <van-stepper v-model="purchaseNum"
                       input-width="1.014493rem"
                       button-size=".57971rem" />
        </template>
      </van-cell>
      <van-cell class="pay-cell-group__cell"
                title="总计金额">
        <template #default>
          <span class="font-size-12 font-color-red">￥</span>
          <span class="font-size-14 font-color-red">{{ sku.price*purchaseNum }}</span>
        </template>
      </van-cell>
      <van-cell class="pay-cell-group__cell"
                title="到店时间"
                @click="show = true"
                v-if="Number(type) !== 4">
        <template #default>
          <span class="font-size-14 font-color-8C9198">{{ date || '请选择月 / 日' }}</span>
          <span class="font-size-12">&nbsp;
            <van-image fit="contain"
                       width=".120773rem"
                       height=".241546rem"
                       :src="require('@/assets/icon/you@3x.png')" />
          </span>
        </template>
      </van-cell>
      <van-cell class="pay-cell-group__cell"
                title="配送地址"
                v-if="Number(type) === 4">
        <template #label>
          <div class="address">
            <van-image width=".483092rem"
                       height=".483092rem"
                       fit="contain"
                       :src="require('@/assets/icon/xinxi@3x.png')" />
            <p>{{ address.name }}({{address.phone}})</p>
          </div>
          <div class="address">
            <van-image width=".483092rem"
                       height=".483092rem"
                       fit="contain"
                       :src="require('@/assets/icon/dizhi@3x.png')" />
            <p>{{ address.address }}</p>
          </div>
        </template>
      </van-cell>
    </van-cell-group>
    <van-cell class="pay-cell-remark"
              title="备注" />
    <van-field class="pay-cell-remark__content"
               v-model="remark"
               rows="4"
               autosize
               type="textarea"
               maxlength="50"
               placeholder="这里是一个备注"
               show-word-limit />
    <van-calendar v-model="show"
                  @confirm="onConfirm" />
    <van-submit-bar class="pay-submit-order"
                    label="总计金额"
                    text-align="left"
                    :price="sku.price*purchaseNum*100"
                    button-text="去支付"
                    @submit="onSubmit" />
  </div>
</template>

<script>
import TopHeader from '@/components/TopHeader';
import cardDeta from '@/components/cardDeta';

export default {
	name: 'index',
	components: {
		TopHeader,
		cardDeta,
	},
	data() {
		return {
			purchaseNum: 1, //数量
			price: 199, //价格
			date: '', //到店时间
			show: false, //到店时间选择弹窗
			remark: '', //备注
			type: '', //模块
			sku: {
				img: '',
				price: 0,
			},
			address: {
				name: '',
				phone: '',
				address: '',
			},
		};
	},
	mounted() {
		_api
			.api_userPortal_tourProduct_getById({
				tour_product_id: this.$route.query.tour_product_id,
				level: 'prices,shop,sku',
			})
			.then((res) => {
				console.log(res.data.sku);
				res.data.sku.map((item) => {
					if (item.id === Number(this.$route.query.skuId)) {
						this.sku = item;
					}
					console.log(this.sku);
				});
			})
			.catch((err) => {});
		this.type = this.$route.query.type;
		this.purchaseNum = this.$route.query.purchaseNum;

		_api
			.api_userPortal_sysAddress_getListByCon({ is_paginate: 0 })
			.then((res) => {
				console.log(JSON.stringify(res));
				res.data.forEach((item, index) => {
					if (item.is_default) {
						this.address = item;
						return;
					} else {
						this.address = res.data[0];
					}
				});
				console.log(JSON.stringify(this.address));
			})
			.catch((err) => {});
	},
	methods: {
		formatDate(date) {
			return `${date.getYear() + 1900}/${date.getMonth() + 1}/${date.getDate()}`;
		},
		onConfirm(date) {
			this.show = false;
			this.date = this.formatDate(date);
		},
		onSubmit() {
			_api
				.api_userPortal_order_create({
					type: this.type,
					product_sku_id: this.sku.id,
					product_id: this.sku.product_id,
					product_num: this.purchaseNum,
					total_fee: this.sku.price * this.purchaseNum,
				})
				.then((res) => {
					this.$toast.success('支付成功');
				})
				.catch((error) => {
					console.log(error);
					this.$toast.fail('支付失败');
				});
		},
	},
};
</script>

<style lang="scss" scoped>
@import 'index.scss';
</style>
